import Vue from 'vue'
import App from './App.vue'
import router from './router'
import {
  Button,
  Form,
  FormItem,
  Input,
  Container,
  Header,
  Aside,
  Main,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Breadcrumb,
  BreadcrumbItem,
  Card,
  Row,
  Col,
  Table,
  TableColumn,
  Switch,
  Tooltip,
  Pagination,
  Dialog,
  MessageBox,
  Tag,
  Tree,
  Select,
  Option,
  Cascader,
  Alert,
  Tabs,
  TabPane,
  Steps,
  Step,
  Checkbox,
  CheckboxGroup,
  Upload,
  Timeline,
  TimelineItem
//MessageBox比较特殊不许要用Vue.use()
} from 'element-ui'
//导入弹框提示组件
import { Message } from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'
// 导入全局样式表
import './assets/css/global.css'
// 导入axios
import axios from 'axios'
//导入vue-table-with-tree-grid插件
import TreeTable from 'vue-table-with-tree-grid'
//导入富文本编译器
import VueQuillEditor from 'vue-quill-editor'
// require styles(导入富文本编辑器对应的样式)
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

//导入 NProgress 包对应的JS和css
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'


//组件的全局注册
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItem)
Vue.use(MenuItemGroup)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.use(Card)
Vue.use(Row)
Vue.use(Col)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Switch)
Vue.use(Tooltip)
Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Tag)
Vue.use(Tree)
Vue.use(Select)
Vue.use(Option)
Vue.use(Cascader)
Vue.use(Alert)
Vue.use(Tabs)
Vue.use(TabPane)
Vue.use(Steps)
Vue.use(Step)
Vue.use(Checkbox)
Vue.use(CheckboxGroup)
Vue.use(Upload)
Vue.use(Timeline)
Vue.use(TimelineItem)

Vue.prototype.$message = Message//把弹框组件挂载到Vue的原型对象上
Vue.prototype.$confirm = MessageBox.confirm


//配置axios请求的根路径
axios.defaults.baseURL = 'http://timemeetyou.com:8889/api/private/v1/'
//评论区接口
//http://timemeetyou.com:8889/api/private/v1/
//原接口
//http://127.0.0.1:888/api/private/v1/

//在 request 拦截器中，展示进度条 NProgress.start()
//axios请求拦截(通过axios请求拦截器添加token，保证拥有获取数据的权限)
axios.interceptors.request.use(config =>{
  console.log(config);
  NProgress.start()
  config.headers.Authorization = window.sessionStorage.getItem('token')
  //在最后必须return config
  return config
})

//在 response 拦截器中，隐藏进度条 NProgress.done()
axios.interceptors.response.use(config =>{
  NProgress.done()
  return config
})

// 把axios包挂载到vue的原型对象上，这样就可以使每个组件通过this直接访问到$http,从而去发起axios请求
Vue.prototype.$http = axios


Vue.config.productionTip = false

//将vue-table-with-tree-grid注册为全局组件
Vue.component('tree-table',TreeTable)

//将富文本编译器注册为全局可用的组件
Vue.use(VueQuillEditor)

//注册定义时间的一个全局过滤器
//参数（过滤器的名字, 过滤器的处理函数）
Vue.filter('dateFormat' , function(originVal){
const dt = new Date(originVal)

  //拿到完整的4位的年份
  const y = dt.getFullYear()
  //月份
  //padStart(月份总长度,不足时填充的字符)
  const m = (dt.getMonth() + 1 + '').padStart(2,'0')
  // 获取日期
  const d = (dt.getDate() + '').padStart(2,'0')
  //获取时间
  //小时
  const hh = (dt.getHours() + '').padStart(2,'0')
  //分钟
  const mm = (dt.getMinutes() + '').padStart(2,'0')
  //秒数
  const ss = (dt.getSeconds() + '').padStart(2,'0')

  // return `yyyy-mm-dd hh:mm:ss`
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
